import React, { useState } from 'react';
import { 
  Form, 
  Input, 
  Button, 
  Select, 
  Card, 
  message,
  Row,
  Col,
  Space
} from 'antd';
import { useHistory } from 'react-router-dom';
import api from '../services/api';

const { Option } = Select;
const { TextArea } = Input;

const CaseCreatePage = () => {
  const [loading, setLoading] = useState(false);
  const history = useHistory();
  const [form] = Form.useForm();

  const handleSubmit = async (values) => {
    setLoading(true);
    try {
      console.log('提交案例数据:', values);
      
      const response = await api.post('/cases', values);
      console.log('案例创建成功:', response.data);
      
      message.success('案例创建成功');
      history.push('/cases');
    } catch (error) {
      console.error('创建案例失败:', error);
      
      // 如果错误已经被拦截器处理过（如401认证错误），则不再显示错误消息
      if (error.handled) {
        return;
      }
      
      if (error.response) {
        const errorMessage = error.response.data?.detail || '创建案例失败，请稍后重试';
        message.error(errorMessage);
      } else if (error.request) {
        message.error('网络错误，请检查网络连接');
      } else {
        message.error('创建案例失败，请稍后重试');
      }
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    history.push('/cases');
  };

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <h2>新建案例</h2>
      
      <Card>
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
          initialValues={{
            category: 'software',
            approved: false
          }}
        >
          <Row gutter={16}>
            <Col span={16}>
              <Form.Item
                name="title"
                label="案例标题"
                rules={[{ required: true, message: '请输入案例标题' }]}
              >
                <Input placeholder="请输入案例标题" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                name="category"
                label="案例分类"
                rules={[{ required: true, message: '请选择案例分类' }]}
              >
                <Select placeholder="选择分类">
                  <Option value="hardware">硬件</Option>
                  <Option value="software">软件</Option>
                  <Option value="firmware">固件</Option>
                  <Option value="network">网络</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>

          <Form.Item
            name="description"
            label="问题描述"
            rules={[{ required: true, message: '请输入问题描述' }]}
          >
            <TextArea 
              rows={4} 
              placeholder="详细描述遇到的问题..."
            />
          </Form.Item>

          <Form.Item
            name="solution"
            label="解决方案"
            rules={[{ required: true, message: '请输入解决方案' }]}
          >
            <TextArea 
              rows={6} 
              placeholder="详细描述解决方案的步骤..."
            />
          </Form.Item>

          <Form.Item
            name="approved"
            label="审核状态"
          >
            <Select>
              <Option value={false}>待审核</Option>
              <Option value={true}>已审核</Option>
            </Select>
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" loading={loading}>
                创建案例
              </Button>
              <Button onClick={handleCancel}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default CaseCreatePage;